<template>
  <div>
    <!-- <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1">
      </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3">
      </el-table-column>
    </el-table> -->

    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <!-- <el-table-column type="index" label="ID" width="180">
      </el-table-column> -->
      <el-table-column prop="number" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）">
      </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）">
      </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          number: '111',
          name: '王小虎1',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          number: '222',
          name: '王小虎2',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          number: '222',
          name: '王小虎2',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        },
        {
          number: '222',
          name: '王小虎3',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          number: '333',
          name: '王小虎4',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        },
        {
          number: '444',
          name: '王小虎5',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          number: '444',
          name: '王小虎5',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          number: '444',
          name: '王小虎5',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
      ]
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) { // 偶数行
        if (columnIndex === 0) { // 第一列
          return [1, 2]; // 向右合并一格
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },



    objectSpanMethod({ row, column, rowIndex, columnIndex }) {

      // 第几列
      if (columnIndex === 0) {
        // 如果id相同的话，就合并
        var flag = false;
        // console.log(11111, column)
        // 计算 number出现的次数,以及第一次出现的下标,并生成对象
        var obj = {};
        this.tableData.forEach((item, index) => {
          if (obj[item.number]) {
            obj[item.number].count++;
          } else {
            obj[item.number] = {
              count: 1,
              index: index
            };
          }
        });

        var arr = [];
        var arr2 = [];

        // 如果 count >1 则需要列出需要改的项的index
        for (var key in obj) {
          if ((obj[key].count > 1)) {
            arr.push(obj[key].index)
            arr2.push({ ...obj[key], number: key })
          }
        }


        var obj2;
        _.each(arr2, (item, index) => {
          // console.log(11111, item.number === row.number && (item.index === rowIndex))
          if (item.number === row.number && (item.index === rowIndex)) {
            obj2 = {
              rowspan: item.count,
              colspan: 1
            };
          }
          // console.log(11111,

          // )
          var flag = (rowIndex > item.index) &&
            (rowIndex < item.index + item.count)

          if (flag) {
            obj2 = {
              rowspan: 0,
              colspan: 0
            };
          }
        });
        if (obj2) {
          return obj2;
        }
      }
    }
  }
};

// objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//   // 判断所有数据是否有child属性、且有长度、且其parent_id == 1的数据单元格进行合并
//   if (!(row.child && row.child.length || row.parent_id != '0')) {
//     if (columnIndex === 0) {
//       // 将第一列向右合并一格
//       return [1, 2];
//     } else if (columnIndex === 1) {
//       // 删除第二列
//       return [0, 0];
//     }
//   } else if (columnIndex === 0) {
//     // 对第一列的数据进行行合并
//     const row1 = this.titleArr[rowIndex]
//     const col1 = row1 > 0 ? 1 : 0
//     return {
//       rowspan: row1,
//       colspan: col1
//     }
//   }
// }
</script>
